<template>
  <div>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      valueYear: '',
      valueMonth: '',
      valueDate: '',
      searchForm: {
        type: '2',
        times: new Date(new Date()).Format('yy-MM')
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))

      this.$api.orderstatis(this.searchForm).then(res => {
        console.log(res.data.data)

        let objLin = {
          title: {
            text: '客流量/支付笔数'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            x: '80%',
            textStyle: {
              color: '#000000'
            },
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        }
        objLin.xAxis.data = res.data.data.data
        objLin.series = res.data.data.series
        objLin.series[0].itemStyle = {
          normal: {
            color: '#1890FF',
            lineStyle: {
              color: '#1890FF',
              width: 2
            }
          }
        }
        objLin.series[1].itemStyle = {
          normal: {
            color: '#2FC25B',
            lineStyle: {
              color: '#2FC25B',
              width: 2
            }
          }
        }
        res.data.data.series.forEach(item => {
          objLin.legend.data.push(item.name)
        })
        this.chart.setOption(objLin)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
